import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { setToken, getToken, removeToken } from '@/utils/auth'

export default {
    // 开启 模块命名空间 才算是严格模块化管理
    // 访问 mutation action函数的时候 都需要在前面加上模块名称才可以
    namespaced: true,
    // 箭头函数
    // data(){ return {响应式数据} } 复用的时候如果直接写成对象 由于引用类型的特性
    // 各个组件之间共享data中的数据的 组件一个发生改变另一个也会受到影响

    // vuex中的模块也是可以进行复用的 为了复用的时候 互相不影响 采用同样的函数执行 return对象的形式
    // 写成函数形式，为了复用
    state: () => ({
        token: getToken() || '',
        userInfo: {}
    }),
    mutations: {
        setToken(state, token) {
            // 存入vuex
            state.token = token
                // 存入本地
            setToken(token)
        },
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo
        },
        // 清除用户数据的方法
        removeUserInfo(state) {
            state.token = ''
            state.userInfo = {}
            removeToken()
        }
    },
    actions: {
        asyncSetToken(ctx, data) {
            // 发送登录请求 获取token 然后调用muataion存入state中
            // 修改一下 返回promise对象的方法
            return new Promise((resolve, reject) => {
                login(data).then(res => {
                    // 调用mutation函数
                    ctx.commit('setToken', res.data)
                        // 成功返回之后 resolve
                    resolve(res.data)
                })
            })

        },
        asyncGetUserInfo(ctx) {
            return new Promise((resolve, reject) => {
                    // 1. 调用获取个人信息
                    getUserInfo().then(res => {
                        // 依赖res.data中的userId然后发送获取图片的请求
                        getUserDetailById(res.data.userId).then(imgRes => {
                            // 两个接口的数据对象需要组合成一个大对象 然后统一存入state
                            ctx.commit('setUserInfo', {...res.data, ...imgRes.data })
                            resolve()
                        })

                    })
                })
                // 2. 拿到数据之后通过调用mutation函数把信息存入state 
        }
    }
}